<link rel="stylesheet" href="../static/css/style.css">
<link rel="stylesheet" href="../static/css/styleoneadd.css">
<link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
<link rel="stylesheet" href="../static/plugins/bootstrap-3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../static/plugins/bootstrap-3.3.7/css/bootstrap.min.css">

<style>
    body{
        background-color: #f2f2f2 !important;
    }
</style>

    <!-- 内容主体区域 -->
<div class="layui-fluid-pad" ng-app="createQuestion" ng-controller="create_question">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                <label>新增问题</label>
                <a  href="javascript:;" class="layui-btn  layui-t-h backs-btn">
                    <i class="layui-icon">&#xe65c;</i>
                    返回
                </a>
            </div>
            <div class="layui-card-body">
                <div class="layui-row layui-pad15">
                    <form class="layui-form" action="" lay-filter="test1">

                        <div class="layui-col-md12 layui-col-lh">
                            <div class="layui-row">
                                <div class="layui-col-md2 layui-display-flex layui-width-b">
                                    <label class="layui-form-label layui-width-a"> 问题名称</label>
                                </div>
                                <div class="layui-col-md3">
                                    <input type="text" name="title" id="questionContent"  placeholder="如：您的性别" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md12 layui-col-lh">
                            <div class="layui-row">
                                <div class="layui-col-md2 layui-display-flex layui-width-b">
                                    <label class="layui-form-label layui-width-a">问题类型</label>
                                </div>
                                <div class="layui-col-md3">
                                    <select name="city" class="form-control" lay-ignore id="questionType">
                                        <option value="">请选择</option>
                                        <option value="{{x.typeName}}" ng-repeat="x in classTypeList">{{x.typeName}}</option>
                                        <!-- <option value="0">北京</option>
                                         <option value="1">上海</option>
                                         <option value="2">广州</option>
                                         <option value="3">深圳</option>
                                         <option value="4">杭州</option>-->
                                    </select>                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md12 layui-col-lh">
                            <div class="layui-row">
                                <div class="layui-col-md2 layui-display-flex layui-width-b">
                                    <label class="layui-form-label layui-width-a">选项类型</label>
                                </div>
                                <div class="layui-col-md3">
                                    <input type="radio" name="sex" value="1" title="单选" checked="">
                                    <input type="radio" name="sex" value="2" title="多选">
                                </div>
                            </div>
                        </div>
                        <div class="layui-addStyle">
                            <!--添加选项-->
                        </div>

                        <div class="layui-col-md12 layui-col-lh">
                            <div class="layui-col-md2 layui-width-b layui-text-right">
                                <button type="button" class="layui-btn layui-t-h" id="addAnswer">增加选项</button>
                            </div>
                        </div>

                        <div class="layui-col-md12 layui-text-center">
                            <a href="#" class="layui-btn layui-btn-w layui-t-h" ng-click="saveQuestion()">
                                <i class="layui-icon">&#xe681;</i>保存
                            </a>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>

<script src="../static/js/jquery.min.js"></script>
<script src="../static/plugins/layui/layui.js"></script>
<script src="../static/plugins/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../static/js/angular.js"></script>
<script src="../static/js/app/consts/consts.js"></script>
<script>

    var num = 0;

    var getAllClassTypeURL = baseUrl +  "/exam/getAllClassType";
    var addQuestionURL = baseUrl + "/exam/addQuestion";


    var app = angular.module("createQuestion", ['ng']);
    app.controller("create_question", function ($scope, $http) {
        $http({
            method: 'GET',
            params:{"token":"11111"},
            url: getAllClassTypeURL
        }).then(function successCallback(result){
            $scope.classTypeList = result.data.data;
            console.log($scope.classTypeList);
            shuaxin();
        });

        //增加选项点击事件
        $("#addAnswer").click(function() {
            num++;
            add11();

        });

        $scope.saveQuestion = function () {
            var content = $("#questionContent").val();
            if(content === null || content === undefined || content === "") {
                layer.msg("请输入题目内容");
                return
            }

            var classType = $("#questionType").val();
            if(classType === null || classType === undefined || classType === "") {
                layer.msg("请选择题目类型");
                return
            }

            var answers = getFormData();
            if(answers.length === 0) {
                layer.msg("请添加题目答案");
                return
            }

//            console.log(JSON.stringify(answers));
            var data = JSON.stringify({
                token:"123456",
                content:content,
                classType:classType,
                optionType:$("input[name='sex']:checked").val(),
                answers:answers
            });
            console.log(data);

            $http.post(addQuestionURL,data).
                then(function successCallback(result) {
                console.log(result.data.data);
                msg(result.data.message);
                window.location.href = "questionManage.html";
            },function errorCallback(result) {
                msg("添加失败！");
            });

        }
        
    });

    //获取所有答案
    function getFormData() {
        var answers = [];
        for(var i = 1; i <= num; i++){
            var answer = {};
            answer.content = $("#answerContent" + i).val();
            answer.localUnitermIds = $("#localUniterm" + i).val();
            answers.push(answer);
        }
        return answers;
    }

    function add11() {
        var html = '';
        html += '<div class="layui-col-md12 layui-col-lh">';
        html += '<div class="layui-row">';

        html += '<div class="layui-col-md2 layui-display-flex layui-width-b">';
        html += '<label class="layui-form-label layui-width-a">' + '选项值' + '</label>';
        html += ' </div>';
        html += '<div class="layui-col-md1">';
        html += '<input type="text" name="title" id="answerContent' + num + '" class="form-control">';
        html += '</div>';
        html += '<div class="layui-col-md3 layui-left-pad15">';
        html += '<button type="button" class="layui-btn layui-t-h" onclick="test1()">关联平台单项</button>';
        html += '<button type="button" class="layui-btn layui-t-h dels-btn" onclick="delDx(this)">删除</button>';
        html += '<input type="hidden" id="localUniterm' + num + '"/>';
        html += '</div></div></div>';
        console.log(num);
        $('.layui-addStyle').append(html);

    }
    
    function delDx(e) {
        var  thischild = e.parentNode.parentNode.parentNode.parentNode;
        thischild.removeChild(e.parentNode.parentNode.parentNode);
    }

    function msg(msg) {
        layui.use(['form','layer'], function () {
            var layer = layui.layer;
            layer.msg(msg);
        });
    }

    function shuaxin() {
        layui.use(['form','layer'], function () {
            var form = layui.form;
            form.render('select',"test1");
        });
    }

    function test1() {
        layui.use(['form','layer'], function () {
            var form = layui.form;
            var strU = 'relationUniterm.html?num='+num;
            layer.open({
                type: 2,
                title:'单项库关联',
                area: ['850px', '500px'],
                shadeClose: true, //开启遮罩关闭
                content: strU
            });
        });
    }

    //Demo
    layui.use(['form','layer'], function(){
        var form = layui.form;


        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
        $(function () {
            form.render('select', 'test1');
        });

        //单项关联
        /*$(function () {
            $('.addXuan').on('click',function () {
                var strU = 'relationUniterm.html';
                layer.open({
                    type: 2,
                    title:'单项库关联',
                    area: ['850px', '650px'],
                    shadeClose: true, //开启遮罩关闭
                    content: strU,
                    yes: function(index, layero){
                        //按钮【按钮一】的回调
                        alert(layero);
                    }
                });
            });
            form.render('select', 'test1');
        });*/



    });
</script>


